<template>
	<div class="container">
		<el-form label-width="140px">
		<el-tabs v-model="activeName" @tab-click="handleClick">
		    <el-tab-pane label="基本信息" name="基本信息">
				<div class="container">
					<h3>机构信息</h3>
					<el-row :gutter="20" style="margin-top:20px;">
							<el-col :span="10" >
								<el-form-item label="机构简称">
								<el-input class="handle-input" placeholder="追溯码上展示，不得超过6个字" v-model="ruleForm.abbreviation" style="width:300px"></el-input>
								</el-form-item>
								<!-- <el-form-item label="所在区域：" prop="area">
									<el-cascader size="large" :options="options" style="width:300px" v-model="form.area" ></el-cascader>
								</el-form-item> -->
					
								<el-form-item label="营业执照照片">
									<el-upload
										class="upload-poster"                               
										action="https://jsonplaceholder.typicode.com/posts/"
										:show-file-list="false"
										:on-change="imgPreview"
										:auto-upload="false">
										<img v-if="licenseImg1" :src="licenseImg1" class="avatar">
										<i v-else class="el-icon-plus avatar-uploader-icon"></i>
									</el-upload>
									jpg、png、gif格式，不超过2MB
								</el-form-item>
							</el-col>
						<el-col :span="12">
						<el-form-item label="企业名称">
							<el-input class="handle-input" placeholder="企业全称" v-model="ruleForm.name" style="width:300px"></el-input>
						</el-form-item>
						
						<el-form-item label="统一社会信用代码">
							<el-input class="handle-input" placeholder="请输入统一社会信用代码" v-model="ruleForm.creditCode" style="width:300px"></el-input>
						</el-form-item>
						<el-form-item label="注册地址">
							<el-input class="handle-input" placeholder="请填写详细注册地址" v-model="ruleForm.address" style="width:300px"></el-input>
						</el-form-item>
						
						 <el-form-item label="营业期限：">
							<el-date-picker
								value-format="yyyy/MM/dd"
								format="yyyy/MM/dd"
								style="width:300px"
								v-model="value1"
								type="daterange"
								:disabled="disabled1"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期">
							</el-date-picker>
							<el-checkbox style="margin-left:10px;" v-model="checked1" @change="changeState1">长期</el-checkbox>
						</el-form-item> 
					</el-col>
					</el-row>
				</div>
				<div class="container" style="margin-top:20px;">
					<h3 style="margin-bottom:20px;">联系人信息</h3>
					<el-row>
						<el-col :span="10">
							<el-form-item label="联系人">
								<el-input class="handle-input" placeholder="" v-model="ruleForm.us.username" style="width:300px"></el-input>
							</el-form-item>
							<el-form-item label="职位">
								<el-input class="handle-input" placeholder="" v-model="ruleForm.address" style="width:300px"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="联系人电话">
								<el-input class="handle-input" placeholder="" v-model="ruleForm.us.phone" style="width:300px"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					
				</div>
			</el-tab-pane>
		    <el-tab-pane label="平台设置" name="平台设置">
				<h3>软件LOGO</h3>
				<el-form-item label="平台名称" style="margin-top:20px;">
					<el-input class="handle-input" placeholder="" v-model="ruleForm.platform" style="width:300px"></el-input>
				</el-form-item>
				<el-form-item label="长方形">
					<el-upload
						class="upload-poster"                               
						action="https://jsonplaceholder.typicode.com/posts/"
						:show-file-list="false"
						:on-change="imgPreview2"
						:auto-upload="false">
						<img v-if="logoImg" :src="logoImg" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
					支持透明背景png格式，建议尺寸长宽5:1，不得超过2M
				</el-form-item>
				
				<el-form-item label="正方形">
					<el-upload
						class="upload-poster"                               
						action="https://jsonplaceholder.typicode.com/posts/"
						:show-file-list="false"
						:on-change="imgPreview3"
						:auto-upload="false">
						<img v-if="logozImg" :src="logozImg" class="avatar">
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
					支持透明背景png格式，建议尺寸长宽1:1，不得超过2M
				</el-form-item>
			</el-tab-pane>
			
				  
		</el-tabs>
		<el-form-item class="footerFixed"  label-width="0px" style="z-index: 2000">
                <el-button type="primary" @click="menu_save" >提交</el-button>
          	</el-form-item> 
		</el-form>
	</div>
</template>

<script>
	import {company_findById,company_update} from '@/request/api';
	import uploadImg from '../../../common/uploadImg';
	export default{
		components: {
		    uploadImg,
		},
		data(){
			return{
				logoImg:"",
				logozImg:'',
				activeName:'基本信息',
				ruleForm:{
					us:{
						username: '',
					}
				},
				checked1:false,
				disabled1:false,
				value1:'',
				licenseImg1:''
			}
		},
		mounted(){
			this.init()
			
		},
		methods:{
			init(){
				var id = localStorage.getItem("companyId")
                company_findById(id).then((res)=>{
					this.ruleForm = res.data
					
					this.user = res.data.us
					
					if(this.ruleForm.trem != ""){
						if(this.ruleForm.term != "永久"){
							var srr = res.data.term.split("至")
							this.value1 = srr
							this.disabled1 = false
						}else{
							this.value1 = ""
							this.checked1 = true 
							this.disabled1 = true
						}
					}
					if(this.ruleForm.legalTime != "" && this.ruleForm.legalTime != null){
						if(this.ruleForm.legalTime != "永久"){
							var srr = res.data.legalTime.split("至")
							this.value5 = srr
							this.disabled5 = false
						}else{
							this.value5 = ""
							this.checked5 = true 
							this.disabled5 = true
						}
					}
					if(this.ruleForm.operateTime != "" && this.ruleForm.operateTime != null){
						if(this.ruleForm.operateTime != "永久"){
							var srr = res.data.operateTime.split("至")
							this.value3 = srr
							this.disabled3 = false
						}else{
							this.value3 = ""
							this.checked3 = true 
							this.disabled3 = true
						}
					}
					if(this.ruleForm.logoImg == "" || this.ruleForm.logoImg == null){
						this.ruleForm.logoImg = this.ruleForm.logoImg
					}else{
						this.logoImg = this.$store.state.plantImg + this.ruleForm.logoImg
					}
					if(this.ruleForm.logozImg == "" || this.ruleForm.logozImg == null){
						this.ruleForm.logozImg = this.ruleForm.logozImg
					}else{
						this.logozImg = this.$store.state.plantImg + this.ruleForm.logozImg
					}
					if(this.ruleForm.licenseImg == "" || this.ruleForm.licenseImg == null){
						this.ruleForm.licenseImg = this.ruleForm.licenseImg
					}else{
						this.licenseImg1 = this.$store.state.plantImg + this.ruleForm.licenseImg
					}
					if(this.ruleForm.coverImg == "" || this.ruleForm.coverImg == null){
						this.ruleForm.coverImg = this.ruleForm.coverImg
					}else{
						this.coverImg = this.$store.state.plantImg + this.ruleForm.coverImg
					}
					
				})
			},
			handleClick(){
				
			},
			imgPreview(file,fileList) {
			    this.licenseImg1 =  URL.createObjectURL(file.raw);
			    let fileName = file.name;
			    let regex = /(.jpg|.gif|.png|.jpeg)$/;
			    if (regex.test(fileName.toLowerCase())) {
			        this.ruleForm.files1 = file.raw
			        this.ruleForm.licenseImg1 = file.name
			    } else {
			        this.$message.error('请选择图片文件');
			    }
			},
			imgPreview2(file,fileList) {
			    this.logoImg =  URL.createObjectURL(file.raw);
			    let fileName = file.name;
			    let regex = /(.jpg|.gif|.png|.jpeg)$/;
			    if (regex.test(fileName.toLowerCase())) {
			        this.ruleForm.files2 = file.raw
			        this.ruleForm.logoImg = file.name
			    } else {
			        this.$message.error('请选择图片文件');
			    }
			},
			imgPreview3(file,fileList) {
			    this.logozImg =  URL.createObjectURL(file.raw);
			    let fileName = file.name;
			    let regex = /(.jpg|.gif|.png|.jpeg)$/;
			    if (regex.test(fileName.toLowerCase())) {
			        this.ruleForm.files3 = file.raw
			        this.ruleForm.logozImg = file.name
			    } else {
			        this.$message.error('请选择图片文件');
			    }
			},
			// reload(){
			// 	this.isRouterAlive = false
			// 	this.$nextTick(function(){
			// 		this.isRouterAlive = true
			// 	})
			// },
			// submitchange(){
			// 	let id = localStorage.getItem("companyId")
			// 	this.showcompanyres.companyId = id
			// 	this.showcompanyres.code = id
			// 	let data = this.showcompanyres
			// 	conpanyshow_update(data).then((res)=>{
			// 		this.getcompanyshow()
			// 		this.reload()
			// 	})
			// },
		
			
			// getcompanyshow(){
			// 	let id = localStorage.getItem("companyId")
			// 	conpanyshow_load(id).then((res)=>{
			// 		this.showcompanyres = res.data
					
			// 	})
			// },
			changeState1(){
				if(this.checked1 == false){
				    this.disabled1 = false
				}else{
				    this.disabled1 = true
				    this.value1 = ""
				}
			},
            menu_save(){
                let data = this.ruleForm
                let formdata = new FormData()
				if(this.checked1 == true){
				   this.ruleForm.term = "永久"  
				}else{
				    if(this.value1 == ""){
				
				    }else{
				        this.ruleForm.term = this.value1[0] + "至" + this.value1[1]
				    }
				}
				
				if(this.ruleForm.files1 != "" && this.ruleForm.files1 != null && this.ruleForm.files1 != undefined){
				    formdata.append("files",this.ruleForm.files1)
				}
				if(this.ruleForm.files2 != "" && this.ruleForm.files2 != null && this.ruleForm.files2 != undefined){
				    formdata.append("files",this.ruleForm.files2)
				}
				if(this.ruleForm.files3 != "" && this.ruleForm.files3 != null && this.ruleForm.files3 != undefined){
				    formdata.append("files",this.ruleForm.files3)
				}
				this.ruleForm.user = JSON.stringify(this.ruleForm.us)
                for(var a in this.ruleForm){
                    if(this.ruleForm[a] == null || this.ruleForm[a] == "null"){
						this.ruleForm[a] = ""
                        formdata.append(a,'') 
                    }else{
						formdata.append(a,this.ruleForm[a])
					}
                }
				
                company_update(formdata).then((res)=>{
                    this.$notify({
                        title: '提示',
                        message: '保存成功',
                        type: 'success'
                    });
					// this.$router.push({
					// 	path:'/companys'
					// })
                })
			},
			//判定操作按钮显示
			judgmentAuthority() {
				var type = JSON.parse(localStorage.getItem('panduanzhuangtai'));
				type.map((item1) => {
						if (item1.name == '企业设置' && item1.children != null) {
							for (var i = 0; i < item1.children.length; i++) {
								if (item1.children[i].name === '编辑') this.added = false;
							}
						}
				});
			}
        }
	}
</script>

<style scoped>
	.avatar-uploader .el-upload {
	   border: 1px dashed #d9d9d9;
	   border-radius: 6px;
	   cursor: pointer;
	   position: relative;
	   width:180px;
	   overflow: hidden;
	 }
	 
	 .avatar-uploader .el-upload:hover {
	   border-color: #409EFF;
	 }
	 .el-upload--text{
	     width:180px;
	 }
	 .avatar-uploader-icon {
	   font-size: 28px;
	   color: #8c939d;
	   width: 178px;
	   height: 178px;
	   line-height: 178px;
	   text-align: center;
	 }
	 .avatar {
	   width: 178px;
	   height: 178px;
	   display: block;
	 }
</style>
